<template>
  <el-dialog title="费用计划-新增" top="5vh" :visible.sync="feiYongJHShow" width="50%" :before-close="Close">

    <el-form ref="form" :rules="modela.rules" :inline="true" :model="modela">
      <!--  -->
      <el-form-item label="部门选择">
        <el-select v-model="unit" placeholder="请选择部门" size="small">
          <el-option value="技术部">技术部</el-option>
          <el-option value="财务部">财务部</el-option>
          <el-option value="市场部">市场部</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年度选择">
        <el-date-picker v-model="annual" size="small" type="year" placeholder="选择年份"></el-date-picker>
      </el-form-item>
      <el-table :data="modela.tableData" style="width: 100%" border>
        <el-table-column fixed label="序号" align="center" width="80px">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" label="费用科目"></el-table-column>
        <el-table-column prop="price" label="预算金额" align="right">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.price'" :rules="modela.rules.price">
              <el-input v-model="scope.row.price" size="small"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex_evenly">
        <!-- <el-button size="small" type="primary" @click="outEvection">保存</el-button> -->
        <el-button size="small" type="success" @click="outEvection">提交</el-button>
        <el-button size="small" type="danger" @click="Close">关闭</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  data() {
    var validateprice = (rule, value, cb) => {
      const xiaoishu = /^[0-9]*$/
      if (xiaoishu.test(value)) {
        return cb()
      }
      cb(new Error('输入正确的格式'))
    }
    return {
      feiYongJHShow: true,
      annual: '',
      unit: '财务部',
      annual1: '',
      modela: {
        // 表格里表单的验证
        rules: {
          price: {
            validator: validateprice,
            trigger: 'blur'
          }
        },
        // 报销费用数据
        tableData: [
          {
            name: '住宿费',
            price: 123.21,
            warning: '20%',
            control: '15%'
          },
          {
            name: '餐费',
            price: 213.13,
            warning: '10%',
            control: '5%'
          },
          {
            name: '交通费',
            price: 121.21,
            warning: '40%',
            control: '25%'
          }
        ]
      }
    }
  },
  methods: {
    Close(done) {
      this.$confirm('你确定要离开吗？')
        .then(_ => {
          this.feiYongJHShow = false
        })
        .catch(_ => {})
    },
  }
}
</script>

<style lang="scss" scoped>
.block {
  position: relative;
  height: 43px;
  margin-bottom: 10px;
  .asw {
    display: inline-block;
    width: 40%;
    margin-left: 11%;
    .el-select {
      width: 60%;
    }
  }
  .wsa {
    display: inline-block;
    width: 49%;
  }
  .sadas {
    display: inline-block;
    width: 72%;
    height: 50px;
  }
  .demonstration {
    margin-left: 2%;
  }
  .el-date-editor.el-input {
    width: 80% !important;
  }
}
.el-table {
  .qwqx {
    margin-top: 3px;
    margin-left: 0px;
  }
}

::v-deep .el-date-picker {
  width: 20%;
}
::v-deep .el-date-editor .el-input {
  width: 100px !important;
}
::v-deep .el-form-item {
  margin-bottom: 0px;
}
</style>
